<script setup lang="ts">
import { ref } from "vue";
import tree from "./com/tree.vue";
import { applydocumentHook } from "./applydocumentHook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import workflow from "@/views/workflow/com.vue";

defineOptions({
  name: "User"
});

const formRef = ref();
const { dialogFlowVisible, searchfrom } = applydocumentHook();
</script>

<template>
  <section>
    <el-card>
      <el-input
        v-model="searchfrom"
        placeholder="请输入表单名称"
        class="input-with-select wlimit"
      >
        <template #append>
          <span class="cursor"
            ><el-icon><Search /></el-icon
          ></span>
        </template>
      </el-input>
    </el-card>
    <div class="main">
      <tree class="tree" />
      <section class="rightpa">
        <section class="tablepa">
          <el-card>
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              >
              <el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              >
            </el-row>

            <div class="title">
              <el-icon><Folder /></el-icon>人事激励与发展备份
            </div>
            <el-divider />
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              >
              <el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ></el-row
            >

            <div class="title">
              <el-icon><Folder /></el-icon>人事激励与发展备份
            </div>
            <el-divider />
            <el-row :gutter="20">
              <el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              >
              <el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ><el-col :span="6"
                ><div class="listunit">
                  <el-icon><Document /></el-icon>请假申请单
                </div></el-col
              ></el-row
            >

            <div class="nodata">
              <el-icon><FolderDelete /></el-icon>
              <div>暂无数据</div>
            </div>
          </el-card>
        </section>
      </section>
      <el-dialog
        v-model="dialogFlowVisible"
        title="流程设计"
        width="1300px"
        top="20px"
      >
        <section class="workflowbox" />
        <workflow />
      </el-dialog>
    </div>
  </section>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
.main {
  width: 100%;
  display: flex;
  margin-top: 15px;
}
.tree {
  width: 300px;
}
.rightpa {
  width: calc(100% - 315px);
  margin-left: 15px;
}
.tablepa {
}
.detailform {
  margin-top: 25px;
  max-width: 500px;
}

.tablerows {
  background: #faf9f9;
  border-bottom: 1px solid #eee;
  width: 400px;
  height: 48px;
  line-height: 48px;
  display: flex;
  .c1 {
    width: 300px;
    padding-left: 16px;
  }
  .c2 {
    width: 70px;
  }
  .c3 {
    width: 30px;
    font-size: 20px;
  }
  .blue {
    color: #1677ff;
  }
}
.tablehead {
  background: #eff2fa;
}
.workflowbox {
  position: relative;
  min-height: 800px;
  width: 100%;
}
::v-deep .el-dialog__body {
  position: relative;
}
.listunit {
  padding: 0 0 15px 0;
  font-size: 14px;
}
.title {
  font-size: 16px;
  margin-top: 12px;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0;
}
::v-deep .el-input-group__append {
  cursor: pointer;
}
.wlimit {
  width: 500px;
}
.nodata {
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
  .el-icon {
    font-size: 40px;
  }
}
</style>
